feat(button)!: port to `<pf-v6-button>` by ArathyKumar · Pull Request #3157 · patternfly/patternfly-elements

ArathyKumar · 2026-08-05T15:59:56Z

What I did

Ported the existing pf-v5-button Web Component to a new pf-v6-button Web Component that follows design and provides feature parity with the PatternFly v6 Button React component.

Changes

Ported pf-v5-button to pf-v6-button.
Updated the component to match the PFv6 Button design and styles.
Aligned the Web Component API and behaviour with the PFv6 React component.
Added support for PatternFly v6 button variants:
- primary
- secondary
- tertiary
- danger
- warning
- plain
- link
- control
- stateful
Added support for button sizes and states.
Added support for loading and disabled states.
Added support for block buttons.
Added support for icons and icon positioning.
Added support for href for link-style buttons.
Added support for button, submit, and reset types.
Maintained form-associated behaviour using native Web Component APIs.
Updated tests and demos
Added the required changeset.

Testing Instructions

Run the pf-v6-button Web Component tests and verify that they pass.
Verify the pf-v6-button API and behaviour.
Verify all supported button variants, sizes, and states.
Verify loading and disabled states.
Verify keyboard navigation and focus behaviour.
Verify form submission and reset behaviour for button, submit, and reset types.
Verify accessibility behaviour.
Verify the pf-v6-button demo and confirm that it matches the PatternFly v6 React Button in appearance and behaviour.

Notes to Reviewers

This PR ports the existing pf-v5-button Web Component to pf-v6-button and brings it in line with the PatternFly v6 React Button.

For more details about the requirements and expected behavior, please refer to the related issue #2984.

changeset-bot · 2026-08-05T16:00:06Z

🦋 Changeset detected

Latest commit: 72754ed

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@patternfly/elements	Major
@patternfly/pfe-core	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-08-05T16:01:11Z

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(button)!: port to `<pf-v6-button>`"
}

github-actions · 2026-08-06T17:41:10Z

SSR Test Run for 10c4b9a: Report

Prevent Chromium Tab-wrap flakiness with a trailing focus sentinel, stop RovingTabindexController from stealing focus after Tab-out, pin timestamp fixtures to en-US, and add the missing major changeset for the v5→v6 button port. Assisted-By: Cursor Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-08-07T11:20:52Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`2b64417`
😎 Deploy Preview	https://deploy-preview-3157--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

github-actions · 2026-08-07T11:22:21Z

SSR Test Run for 5244ae5: Report

github-actions · 2026-08-20T18:53:18Z

SSR Test Run for 218ac93: Report

github-actions · 2026-08-20T19:38:22Z

SSR Test Run for e6afc83: Report

…check Co-authored-by: Cursor <cursoragent@cursor.com> # Conflicts: # elements/pf-v5-clipboard-copy/pf-v5-clipboard-copy.ts # elements/pf-v5-tooltip/demo/block-triggers.html # elements/pf-v5-tooltip/demo/flip.html # elements/pf-v5-tooltip/demo/performance.html # elements/pf-v5-tooltip/demo/trigger.html # elements/pf-v5-tooltip/docs/pf-v5-tooltip.md

github-actions · 2026-08-21T20:09:17Z

SSR Test Run for c7f1b89: Report

github-actions · 2026-08-22T19:25:05Z

SSR Test Run for d2df39e: Report

github-actions · 2026-08-23T14:18:12Z

SSR Test Run for 56e2f06: Report

github-actions · 2026-08-23T14:51:42Z

SSR Test Run for cdb0e95: Report

adamjohnson · 2026-08-26T19:13:48Z

@ArathyKumar, Since we don't hvae Qodo enabled for this repo: have you had an agent review this PR yet?

I had Grok review it in the Qodo style. This feedback will need to be vetted. Results below:

AI review results

Code Review

🐞 Bugs (3)

1. `expanded` cannot be `false` in HTML 🐞 Bug ⚙ API

Description

expanded is an optional reflected Boolean, so markup can only turn it on. The hamburger demo assigns expanded = false in script because a collapsed hamburger has no HTML form. updated() then console.errors for <pf-v6-button hamburger> with no expanded attribute.

Code

elements/pf-v6-button/pf-v6-button.ts L198–L199

@property({ reflect: true, type: Boolean }) expanded?: boolean;

elements/pf-v6-button/demo/hamburger.html L32–L35

// `expanded` is required whenever `hamburger` is set; boolean attributes
// can only express "true", so these two are set to `false` via JS.
document.getElementById('default').expanded = false;

Relevance: Strong. Public HTML API; hard to change after release.

Evidence

willUpdate maps expanded === undefined to aria-expanded: null, so the implementation depends on a third state HTML cannot express. React can pass isExpanded={false}; this element cannot.

pf-v6-button.ts L264–L265, L284–L292

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`expanded` is an optional reflected Boolean (`expanded?: boolean`). HTML authors cannot express a collapsed hamburger (`expanded={false}`). The hamburger demo sets `expanded = false` via JS, and `updated()` console.errors when `hamburger` is set and `expanded` is `undefined`.

### Issue Context
Boolean attributes are true when present and false when absent. `aria-expanded` should apply only when `hamburger` is set, so a missing `expanded` attribute can mean collapsed without leaking `aria-expanded="false"` onto every button.

### Fix Focus Areas
- Keep `expanded` as a normal boolean (absent = false).
- Set `aria-expanded` only when `hamburger` is true: `String(!!this.expanded)`.
- Drop the `expanded === undefined` console.error for markup that omits the attribute.
- Update `demo/hamburger.html` so collapsed hamburgers work with no script.

- elements/pf-v6-button/pf-v6-button.ts[198-199]
- elements/pf-v6-button/pf-v6-button.ts[264-265]
- elements/pf-v6-button/pf-v6-button.ts[284-292]
- elements/pf-v6-button/demo/hamburger.html[6-36]

2. `href` buttons miss PatternFly focus styles 🐞 Bug ♿ A11y

Description

Focus chrome is selected with :host(:focus) #button. With href set, willUpdate removes the host tabindex and the inner <a id="button"> takes focus, so those selectors never match. :host also sets outline: none. Keyboard focus on link buttons does not get the PatternFly hover/focus treatment.

Code

elements/pf-v6-button/pf-v6-button.ts L271–L273

if (isLink) {
  this.removeAttribute('tabindex');
  this.#internals.role = 'none';

elements/pf-v6-button/pf-v6-button.css L1052–L1053

:host(:focus) #button,
:host(:focus-visible) #button {

Relevance: Strong. Keyboard users hit this on every href button, including demo/links-as-buttons.html.

Evidence

The inner <a id="button"> is the focused node. :host(:focus) is false. #button:focus / :host(:focus-within) are not used. Demos set target="_blank" with no rel.

pf-v6-button.ts L386–L401, pf-v6-button.css L404

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
Focus styles are gated on `:host(:focus) #button`. For `href` buttons, focus moves to the inner `<a id="button">` and the host `tabindex` is removed, so PatternFly focus/hover token mapping never applies. `:host { outline: none }` also removes the host focus ring.

### Issue Context
Non-link buttons focus the host (`role="button"`). Link buttons focus the inner anchor (`role="none"` on the host). Selectors must cover both.

### Fix Focus Areas
- Apply the same focus token mapping for `:host(:focus) #button`, `:host(:focus-visible) #button`, and `#button:focus-visible` (or `:host(:focus-within) #button`).
- Restore a visible focus ring consistent with PatternFly (do not leave `:host { outline: none }` without a replacement).
- Add a keyboard-focus assertion or demo check for `href` buttons.
- Consider `rel="noopener noreferrer"` when `target="_blank"`.

- elements/pf-v6-button/pf-v6-button.ts[271-281]
- elements/pf-v6-button/pf-v6-button.ts[386-401]
- elements/pf-v6-button/pf-v6-button.css[399-405]
- elements/pf-v6-button/pf-v6-button.css[1052-1074]
- elements/pf-v6-button/demo/links-as-buttons.html

3. `willUpdate` overwrites `tabindex` every render 🐞 Bug ⚙ API

Description

Enabled non-link buttons run this.tabIndex = 0 on every update. That sprouts tabindex="0" and clobbers an author tabindex="-1". React Button exposes tabIndex for this; the host should keep an author-provided value.

Code

elements/pf-v6-button/pf-v6-button.ts L274–L280

} else {
  this.#internals.role = 'button';
  if (this.#disabled) {
    this.removeAttribute('tabindex');
  } else {
    this.tabIndex = 0;
  }
}

Relevance: Strong. Sprouting attributes is a documented PFE antipattern; overwriting author tabindex is a behavior bug.

Evidence

No test covers author tabindex. variant also reflects with a 'primary' default, so every instance sprouts variant="primary" as well.

pf-v6-button.ts L126, .claude/ADVICE.md “Don't sprout attributes”

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

### Issue description
`willUpdate()` sets `this.tabIndex = 0` on every update for enabled non-link buttons. That sprouts `tabindex="0"` and overwrites author `tabindex="-1"`. `variant` is also `@property({ reflect: true })` with default `'primary'`, which sprouts `variant="primary"` on every instance.

### Issue Context
FACE hosts need to be focusable, but the spec editor (whatwg/html#8365) and PFE ADVICE.md treat sprouting attributes as an antipattern. React Button accepts `tabIndex` and should not be overridden. Default `variant` can stay `'primary'` in JS without reflecting until the author sets it.

### Fix Focus Areas
- Set host `tabIndex` to 0 only when the author has not provided `tabindex`; never clobber `tabindex="-1"`.
- Avoid initializing reflected `variant` (keep the JS default, reflect only when set).
- Add a test: `<pf-v6-button tabindex="-1">` stays `-1` after `updateComplete`.

- elements/pf-v6-button/pf-v6-button.ts[126]
- elements/pf-v6-button/pf-v6-button.ts[271-281]

ArathyKumar added 2 commits August 4, 2026 22:07

chore(button): created pf-v6-button component

942045c

chore(button): added react variants

f21ae79

github-actions Bot added the AT passed Automated testing has passed label Aug 5, 2026

chore(button): replaced pf-v5-button with pf-v6-button

fc7267d

zeroedin changed the title ~~feat(button): port <pf-v5-button> to <pf-v6-button>~~ feat(button)!: port to <pf-v6-button> Aug 20, 2026

fix: style changes

0b7becf

fix: style

e905c19

ArathyKumar added 3 commits August 21, 2026 22:49

chore: updated variant types

38b2134

chore: added pf-v6-button variant demo fixes

e3c5971

chore: updated demo styles

808bef6

fix: accessibility issues

2fb7df3

chore: added test cases

acfbbc3

chore: updated screenshot

72754ed

This comment has been minimized.

Sign in to view

ArathyKumar marked this pull request as ready for review August 24, 2026 14:19

ArathyKumar requested review from adamjohnson and zeroedin August 24, 2026 14:59

ArathyKumar requested review from hellogreg and markcaron August 24, 2026 15:00

Uh oh!

Conversation

ArathyKumar commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Changes

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot Bot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Aug 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Commitlint tests passed!

Uh oh!

github-actions Bot commented Aug 6, 2026

Uh oh!

github-actions Bot commented Aug 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

github-actions Bot commented Aug 7, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

github-actions Bot commented Aug 20, 2026

Uh oh!

github-actions Bot commented Aug 21, 2026

Uh oh!

github-actions Bot commented Aug 22, 2026

Uh oh!

github-actions Bot commented Aug 23, 2026

Uh oh!

github-actions Bot commented Aug 23, 2026

Uh oh!

This comment has been minimized.

adamjohnson commented Aug 26, 2026

1. expanded cannot be false in HTML 🐞 Bug ⚙ API

2. href buttons miss PatternFly focus styles 🐞 Bug ♿ A11y

3. willUpdate overwrites tabindex every render 🐞 Bug ⚙ API

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ArathyKumar commented Aug 5, 2026 •

edited

Loading

changeset-bot Bot commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 5, 2026 •

edited

Loading

github-actions Bot commented Aug 7, 2026 •

edited

Loading

1. `expanded` cannot be `false` in HTML 🐞 Bug ⚙ API

2. `href` buttons miss PatternFly focus styles 🐞 Bug ♿ A11y

3. `willUpdate` overwrites `tabindex` every render 🐞 Bug ⚙ API